<template>
    <div class="service-manage-update-container-step2">
        <div class="step1-info">
            <p>您当前选择的是：</p>
            <div class="delete-box">
                <div v-for="item in updateForm.type" :key="'parent' + item[2].id">
                    <p v-for="(it, index) in item" :key="it.id">
                        <span>{{ it.name }}</span>
                        <a-icon v-if="index !== item.length - 1" type="right" />
                    </p>
                </div>
            </div>
            <a-button @click="changeStep">编辑类目</a-button>
        </div>
        <div class="form-content">
            <div class="head-title">服务报价基本信息</div>
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                class="form"
                layout="horizontal"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 14 }"
            >
                <a-form-model-item label="服务报价标题" prop="title" class="title" required>
                    <div class="input-box">
                        <a-input v-model="form.title" :maxLength="30"></a-input>
                        <p class="length">还能输入{{ 30 - form.title.length }}个字</p>
                    </div>
                    <p class="tip">温馨提示：服务标题需要和当前服务的类目一致，便于APP端用户检索到您的服务报价。</p>
                </a-form-model-item>
                <a-form-model-item label="服务报价封面" prop="img" class="img-input" required>
                    <div class="item">
                        <div class="flex">
                            <custom-cropper-image
                                :width="400"
                                :height="400"
                                path="/service/img"
                                v-model="form.img"
                                :fileSize="6"
                                keys="封面"
                            ></custom-cropper-image>
                            <div style="margin-left: 10px">
                                <p class="size">图片尺寸：400*400PX，支持jpg/jpeg/png格式，大小不超过6M</p>
                                <div class="tip">
                                    <p>展示场景：APP端服务列表页面及服务推荐模块等</p>
                                    <a-popover placement="right">
                                        <template slot="content">
                                            <img src="~/assets/images/service-preview-list.png" alt="" />
                                        </template>
                                        <a-button type="link">
                                            <img src="~/assets/images/service-show.png" alt="" />查看示意图
                                        </a-button>
                                    </a-popover>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="flex">
                            <custom-cropper-image
                                :width="400"
                                :height="262"
                                path="/service/img"
                                v-model="form.banner"
                                :fileSize="6"
                                keys="轮播"
                            ></custom-cropper-image>
                            <div style="margin-left: 10px">
                                <p class="size">图片尺寸：400*262PX，支持jpg/jpeg/png格式，大小不超过6M</p>
                                <div class="tip">
                                    <p>展示场景：服务详情页轮播图</p>
                                    <a-popover placement="right">
                                        <template slot="content">
                                            <img src="~/assets/images/service-preview-banner.png" alt="" />
                                        </template>
                                        <a-button type="link">
                                            <img src="~/assets/images/service-show.png" alt="" />查看示意图
                                        </a-button>
                                    </a-popover>
                                </div>
                            </div>
                        </div>
                    </div>
                </a-form-model-item>
                <a-form-model-item label="服务介绍视频" class="price">
                    <p slot="extra" class="tips" style="font-size: 12px; color: #666">
                        仅支持上传一段视频，视频大小不超过50M
                    </p>
                    <custom-video-upload v-model="form.videoList" path="/service/video/"></custom-video-upload>
                </a-form-model-item>
                <a-form-model-item label="服务报价" prop="price" class="price">
                    <a-input-number
                        v-model="form.price"
                        class="price-input"
                        :step="0.01"
                        :formatter="(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                        :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
                    />
                    元/
                    <a-input v-model="form.unit" class="unit-input" placeholder="单位"></a-input>
                    <div class="tips">
                        <p class="title">
                            温馨提醒：<a-popover placement="right">
                                <template slot="content">
                                    <img src="~/assets/images/service-preview-price.png" alt="" />
                                </template>
                                <a-button type="link">
                                    <img src="~/assets/images/service-show.png" alt="" />查看示意图
                                </a-button>
                            </a-popover>
                        </p>
                        <p>1.报价与单位同时为空时， 在APP端展示为文字“咨询获取报价”。</p>
                        <p>2.仅填写报价未填写单位时，例如填写了500000，在APP端展示为 “￥500000”</p>
                        <p>3.既填写报价又填写单位时，例如价格填写25000，单位填写起，在APP端展示为 “￥25000/起”</p>
                    </div>
                </a-form-model-item>
                <a-form-model-item label="服务报价标签" prop="label" class="content-label">
                    <add-label
                        v-model="form.label"
                        :max="5"
                        :minLabel="2"
                        :maxLength="10"
                        :isShow="true"
                        isIcon="plus"
                        tipText="准确的标签可以让你的服务获得更多曝光,至少2个字,最多10个字,最多5个标签"
                        placeholder="您可以输入：服务承诺、交付速度、服务保障等标签（例如保证完成、免费维护、多方案选择）。回车确认"
                    >
                    </add-label>
                </a-form-model-item>
                <a-form-model-item label="服务报价详情" prop="info" class="info">
                    <tinymce-editor v-model="form.info" :height="400" cosPath="service-richText"></tinymce-editor>
                </a-form-model-item>
                <a-form-model-item label="温馨提示" class="tips-item mb20">
                    <p>1.单张图片宽度在480px~620px之间，建议620px</p>
                    <p>2.单张图片高度<=960px</p>
                    <p>3.图片上添加文字，中文使用26号，英文和数字使用20号</p>
                    <p>4.单张图片大小不超过500kb，格式为jpg或者png</p>
                    <a-button type="primary" @click="show = true" class="mt10"> 手机端预览 </a-button>
                </a-form-model-item>
                <template v-if="!$route.query.detail">
                    <a-form-model-item label="" prop="privacy" class="check-privacy mb20">
                        <a-checkbox v-model="form.privacy">
                            <span class="word">
                                <span>我承诺以上图文信息不涉及侵权，如若侵权，发生知识产权纠纷，与天作云网无关。并同意</span>
                                <a-button
                                    type="link"
                                    @click="isShow = true"
                                >《天作云网服务商信息发布或出售规范》</a-button>
                            </span>
                        </a-checkbox>
                    </a-form-model-item>
                    <a-form-model-item label="" class="btn mb20">
                        <a-button type="primary" @click="submit"> 发布 </a-button>
                    </a-form-model-item>
                </template>
            </a-form-model>
        </div>
        <a-modal class="preview-show" :visible="show" :footer="null" @cancel="show = false" width="375px">
            <div class="content" v-html="form.info"></div>
        </a-modal>
        <a-modal class="rich-text" :visible="isShow" :footer="null" @cancel="isShow = false" width="700px">
            <p class="ql-align-center" style="text-align: center">
                <strong
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 20px"
                >天作云平台知识工作者信息发布或出售管理细则</strong>
            </p>
            <p class="ql-align-center">
                <span style="color: rgb(51, 51, 51)">&nbsp;</span>
            </p>
            <p class="ql-align-center">
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第一章&nbsp;总则</strong>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第一条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;为了维护天作云平台正常运营秩序，规范知识工作者信息发布或出售行为，根据《天作云平台服务报价协议》及《天作云平台服务报价规则》，制定本规则。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第二条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;知识工作者信息发布或出售需要遵守国家法律法规以及天作云平台规则的规定，如有违反而造成任何法律后果，您将独立承担所有相应的法律责任。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第三条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;本规则适用于天作云平台的所有天作云平台用户。</span>
            </p>
            <p><span style="color: rgb(51, 51, 51)">&nbsp;</span></p>
            <p class="ql-align-center">
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第二章&nbsp;定义</strong>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第四条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;在本规则中所使用的词语，已有天作云平台规则对其定义的从其定义，未有定义的，应具有以下含义：</span>
            </p>
            <p>
                <strong
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >1、&nbsp;发布服务报价：</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >指知识工作者在平台展示自身技能信息的行为。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">2、&nbsp;发布案例：</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >指知识工作者在平台展示证明自身技能的信息的行为，该信息必须是知识工作者通过自身技能成功满足雇主需求内容的信息。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">3、&nbsp;昵称：</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >指用户上传提交，符合平台规则并经平台审核通过后用于命名个人区别于他人的平台账户称谓。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">4、&nbsp;店铺名称：</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >指知识工作者上传提交的符合平台规则且经平台审核通过的对自身平台店铺的命名，该命名有别于标识账户称谓的“昵称”。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">5、&nbsp;店铺LOGO：</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >指知识工作者上传提交的符合平台规则且经平台审核通过的代表自身平台店铺的形象图片，该图片有别于代表平台账户形象的“个人头像”。</span>
            </p>
            <p><span style="color: rgb(51, 51, 51)">&nbsp;</span></p>
            <p class="ql-align-center">
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第三章 管理细则</strong>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第一节 基本规则</strong>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第五条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;知识工作者提交的信息均需通过天作云平台审核后才能成功发布。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第六条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;天作云平台仅是提供展示、交易的平台，不对参与者行为的合法性、有效性及作品的真实性、合法性和有效性作任何明示或暗示的担保。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第七条&nbsp;</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >天作云平台仅向用户提供相关技术和服务报价，知识工作者店铺中所有案例、作品等内容均由知识工作者自行创作和上传，属知识工作者的个人行为，天作云平台仅以普通或者非专业人员的知识水平标准对知识工作者提交的证据材料进行辨别，不承担对知识工作者店铺中展示的设计作品、案例等内容承担任何品质及权利保证责任。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第八条&nbsp;</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >天作云平台有义务维护网站的正常运作，妥善储存平台用户提交的信息。天作云平台有权根据国家法律、行政法规、部门规章及相关规则性文件以及天作云平台规则的规定，在未通知用户的情况下，删除&nbsp;/
                    下架用户提供的不符合相关规定的信息，同时天作云平台有权根据本规则对知识工作进行扣除诚信分、限制经营的处理。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第二节 管理细则</strong>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第九条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;知识工作者不得在服务报价页面（包括但不限于服务报价标题、服务报价描述、服务报价图片等），店铺页面（包括但不限于店铺名称、店铺LOGO、店铺简介、店铺装修等），案例页面（包括但不限于案例名称、案例介绍、案例详情页等），用户资料页（包括但不限于昵称、头像、简介、关于我们等）以及天作云平台其他信息发布区块发布国家法律法规、天作云平台规则禁止发布的相关信息。知识工作者应保证店铺基础信息完整，不得使用空信息、系统默认信息等无意义的内容作为店铺名称或头像。以上行为一经查实，本网站有权处理。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第十条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;知识工作者禁止发布或出售以下内容：</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >一、极限词汇，比较级、最高级词汇，夸张、虚假词汇的信息（例：第一、最好、最大、首选、唯一等）;</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >二、未经授权使用的标签的信息（如：未经授权的官方特定产品标识、未经授权的暗指性官方特定产品标识、推荐、优选、热销、热卖、爆款等）；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >三、未经授权使用的天作云字样或logo的信息；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >四、服务报价内容为代理公司注册、代理记账等，知识工作者必须具备企业资质，且营业执照营业范围必须包含所出售的服务报价内容，否则视为违规；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >五、商标、专利、版权等知识产权相关业务的咨询、注册、登记、转让、查询、备案类信息；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >六、代理高新企业认定类服务报价；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >七、非天作云银行账号及个人支付宝账户等信息；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >八、含有非平台业务的广告、招聘类内容；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >九、新闻发稿、代写、新闻类服务报价发布／出售需持有新闻撰写资质；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >十、禁止使用过于宽泛的关键词作为昵称、店铺名称（例如：平面设计、营销推广、网站建设等类目名）。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >若知识工作者发布 /
                    出售的店铺装修、服务报价、案例、昵称、店铺名称、店铺LOGO、头像、简介、关于我们等信息被认定为以上违规信息：</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >第一次天作云平台将有权下架该信息或予以警告并限期整改；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >第二次天作云平台将有权下架该信息并予以警告并限期整改；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >第三次天作云平台将有权永久下架或删除该信息并限制经营7天；情节严重的，天作云平台将直接清退。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第十一条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;&nbsp;禁止发布/传播含联系方式信息（包含但不限于QQ，电话，网址，二维码，条形码，邮箱等）。若知识工作者发布的信息被认定为含有、传播或引导其他用户公开除天作云平台以外的其他联系方式：</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >第一次天作云平台将有权下架该信息或予以警告并限期整改；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >第二次天作云平台将有权下架该信息并予以警告并限期整改；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >第三次天作云平台将有权永久下架或删除该信息并限制经营7天；情节严重的，天作云平台将直接清退。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第十二条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;禁止发布或出售违反宪法精神和中华人民共和国相关法律法规、带有民族歧视性、夸大宣传并带有欺骗性、有损于社会主义道德风尚或者有其他不良影响的信息、商品、服务报价等，包括但不限于以下情形：</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >一、泄露个人隐私或企业内部数据（含个人联系方式、个人手机定位、电话清单查询、银行账户查询等内容）；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >二、涉黄、赌博、暴力等内容；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >三、代做学术类服务报价，包含但不限于代写论文、代创作毕业设计等；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >四、通过刷单、炒作等形式，进行数据作假或作弊的行为，包括但不限于刷单、刷粉、刷信用、刷评价、刷钻、删帖、盗图申诉、粉丝数量、阅读数量、下载数量、推广效果数据、网络水军、虚假营销等；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >五、用于监听、窃取隐私或机密的软件；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >六、比特币、莱特币等互联网虚拟币以及相关商品；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >七、任何有损网络安全的服务报价：木马、黑客程序、破网、翻墙软件等；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >八、非法传销类服务报价；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >九、侵犯第三方知识产权的服务报价：软件/程序破解类服务报价、游戏/程序外挂类服务报价、盗取网银/游戏账号、抄袭/盗用他人图片等；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >十、国家领导人及其家属信息（包括姓名、形象、漫画形象及含相关信息的案例展示等）；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >十一、政治敏感信息、出现或映射种族歧视、宗教歧视的内容；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >十二、知识工作者明知雇主需求违反国家法律，但依然进行交易的行为；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >十三、违背社会公共利益或公共道德或天作云平台认为不适合在平台上展示的内容。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >若知识工作者展示的信息被认定为以上敏感信息，天作云平台有权下架或删除相关信息；情节严重的将直接处以永久清退。用户因违法交易造成的一切经济损失由用户自行承担，本网站将不承担任何法律责任。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第十三条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;知识工作者发布信息需同时遵守行业信息发布相关规定 :</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >一、知识工作者出售服务报价均应保持标题、主图、详情、类目、属性内容一致，禁止出现服务报价标题、图片、价格、售后服务报价等服务报价要素之间明显不匹配的情况。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >二、请勿在服务报价标题中大量滥用与服务报价内容无关的热搜关键词及特殊符号，标题应当简单直接，突出卖点；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >标题基本组合：服务报价的三级类目+服务报价属性（至少每类属性含一项勾选内容）+服务报价卖点。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >(比如搜索“企业logo设计”，logo设计服务报价标题写为：logo设计
                    企业logo设计设计总监操刀3套方案)。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >三、请根据市场行情及该服务报价的内容，对服务报价进行合理定价，禁止恶意低价竞争，扰乱市场行情。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >四、服务报价封面图片必须清晰完整。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >五、服务报价中的成功案例需上传已完成的真实案例，案例支持图片，音频和视频；音频案例格式支持以wav、mp3结尾的音频播放链接。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >六、服务报价详情中详细描述与此服务报价相关的内容介绍，内容描述准确、完整、真实，禁止虚假宣传/承诺。</span>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">服务报价详情需包含：</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >（一）服务报价标准：必须详细说明服务报价的内容；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >（二）交易流程：必须符合天作云平台交易流程；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >（三）售后服务报价：必须详细描述售后的服务报价项及售后服务报价时间；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >（四）退款须知：详细描述各种情况下的退款说明。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >七、服务报价发布成功后，不得进行类目修改。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >八、未产生交易的服务报价，可按照新发布服务报价流程自行定价；已产生交易的服务报价，价格修改幅度必须在50%以内（以上次审核通过的服务报价价格为准）。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >九、服务报价内容（包括但不限于服务报价标题，图片，重要属性）存在较高相似度的服务报价，只允许发布一次。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >十、禁止展示无效服务报价等宣传内容（无效服务报价：因促销服务报价活动，超过活动期限而未将其下架的服务报价）。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >十一、店铺装修信息发布细则：</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >（一）店铺中禁止使用特殊字符（禁止使用无意义或意义不明的符号，如非汉字类的文字语言）；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >（二）禁止简介内容与店铺实际售卖服务报价不一致；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >（三）禁止在简介中出现大量热搜但与店铺实际售卖服务报价不一致的词汇；</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >（四）装修图片必须清晰完整，且图片内容必须与服务报价内容强相关。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >若知识工作者违反以上规定，天作云平台将有权下架该信息；情节严重的，将被处以永久下架或删除。知识工作者因虚假宣传&nbsp;/&nbsp;违背承诺等原因造成的一切经济损失由用户自行承担，本网站将不承担任何法律责任。且因知识工作者原因导致雇主、天作云平台及其关联公司发生损失的，天作云平台有权划扣知识工作者天作云账户中的资金以弥补雇主、天作云平台及其关联公司发生的损失。</span>
            </p>
            <p><span style="color: rgb(51, 51, 51)">&nbsp;</span></p>
            <p class="ql-align-center">
                <strong
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >第四章&nbsp;规则的变更</strong>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第十四条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;天作云平台可根据国家法律法规变化、天作云平台商业模式的调整及维护交易秩序、保护消费者权益需要，不时修改本规则、补充规则，变更后的规则、补充规则（下称“变更事项”）将通过法定程序并以《天作云平台服务报价协议》第九章的约定方式通知您。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >如您不同意变更事项，您有权于变更事项确定的生效日前联系天作云平台反馈意见。如反馈意见得以采纳，天作云平台将酌情调整变更事项。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >如您对已生效的变更事项仍不同意的，您应当于变更事项确定的生效之日起停止使用天作云平台服务报价，变更事项对您不产生效力；如您在变更事项生效后仍继续使用天作云平台服务报价，则视为您同意已生效的变更事项。</span>
            </p>
            <p><span style="color: rgb(51, 51, 51)">&nbsp;</span></p>
            <p class="ql-align-center">
                <strong
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >第五章&nbsp;法律适用、管辖与其他</strong>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第十五条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;本规则之订立、生效、解释、修订、补充、终止、执行与争议解决均适用中华人民共和国大陆地区法律；如法律无相关规定的，参照商业惯例及/或行业惯例。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第十六条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;您因使用天作云平台服务报价所产生及与天作云平台服务报价有关的争议，由天作云平台与您协商解决。协商不成时，任何一方均可向重庆仲裁委员会提起仲裁。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第十七条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;本规则任一条款被视为废止、无效或不可执行，该条应视为可分的且并不影响本规则其余条款的有效性及可执行性。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)">第十八条</strong><span
                    style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255)"
                >&nbsp;天作云平台对本规则拥有最终解释权。</span>
            </p>
            <p>&nbsp;</p>
        </a-modal>
    </div>
</template>

<script>
import AddLabel from '@/components/add-label'
import TinymceEditor from '@/components/tinymce-editor'

export default {
    name: 'Step2',
    components: {
        TinymceEditor,
        AddLabel
    },
    model: {
        prop: 'updateForm',
        event: 'change'
    },
    props: {
        updateForm: {
            type: Object,
            required: true
        }
    },
    data () {
        const validateImg = (rule, value, callback) => {
            const { img, banner } = this.form
            if (img.length && banner.length) {
                callback()
            } else {
                callback(new Error('请上传所有服务报价图片'))
            }
        }
        const validatePrice = (rule, value, callback) => {
            const { price } = this.form
            if (!price) {
                callback()
            } else if (price > 9999999999) {
                callback(new Error('请勿超过最大值9,999,999,999'))
            } else {
                callback()
            }
        }
        const checkPrivacy = (rule, value, callback) => {
            if (value) {
                callback()
            } else {
                callback(new Error('请同意并勾选'))
            }
        }
        return {
            form: {
                // 服务报价属性
                attr: [],
                // 标题
                title: '',
                // 封面图
                img: [],
                // 轮播图
                banner: [],
                // 标签
                label: [],
                // 价格
                price: '',
                // 单位
                unit: '',
                // 详情
                info: '',
                videoList: {
                    videoUrl: '',
                    imgCoverUrl: ''
                },
                privacy: false
            },
            show: false,
            isShow: false,
            rules: {
                title: [
                    {
                        required: true,
                        message: '请输入服务报价标题',
                        trigger: ['change', 'blur']
                    }
                ],
                info: [
                    {
                        required: true,
                        message: '请输入服务报价详情',
                        trigger: ['change', 'blur']
                    }
                ],
                img: [{ validator: validateImg, trigger: 'change' }],
                price: [{ validator: validatePrice, trigger: 'change' }],
                privacy: [{ required: true, validator: checkPrivacy }]
            },
            attrOptions: []
        }
    },
    watch: {
        updateForm: {
            deep: true,
            immediate: true,
            handler (val) {
                // 标题
                this.form.title = val.title || ''
                // 封面图
                this.form.img = val.img || []
                // 轮播图
                this.form.banner = val.banner || []
                // 价格
                this.form.price = val.price || ''
                // 单位
                this.form.unit = val.unit || ''
                // 详情
                this.form.info = val.info || ''
                // 标签
                this.form.label = val.label || []
                this.form.videoList = {
                    videoUrl: val.videoUrl,
                    imgCoverUrl: val.imgCoverUrl
                }
            }
        }
    },
    created () {
        if (this.$route.query.id) {
            this.form.privacy = true
        }
    },
    mounted () {},
    methods: {
        changeStep () {
            this.$emit('change', {
                ...this.updateForm,
                ...this.form,
                step: 1
            })
        },
        submit () {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    const { title, img, banner, price, unit, info, label } = this.form
                    const { videoUrl, imgCoverUrl } = this.form.videoList
                    const { type } = this.updateForm
                    const flatten = (arr) => {
                        return [].concat(...arr.map(x => (Array.isArray(x) ? flatten(x) : x)))
                    }
                    const res = await this.$ApiServer['service/update']({
                        id: this.$route.query.id || '',
                        serviceKindId: Array.from(new Set(flatten(type.map(item => item.map(it => it.id))))).join(
                            ','
                        ),
                        title,
                        detail: info,
                        photo: img.join(','),
                        slideshow: banner.join(','),
                        price,
                        unit: unit.replace(/(^\s*)|(\s*$)/g, ''),
                        label: label.map(item => item.name).join(),
                        videoUrl,
                        imgCoverUrl
                    })
                    if (res.code === 200) {
                        this.$message.success(res.message)
                        this.$emit('change', {
                            ...this.updateForm,
                            ...this.form,
                            step: 3
                        })
                    } else {
                        this.$message.error(res.message)
                    }
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
.service-manage-update-container-step2 {
    background: #fff;
    border-radius: 4px;
    .step1-info {
        margin: 0 -10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        min-height: 50px;
        background: #ddf7e9;
        padding: 5px 20px;
        box-sizing: border-box;
        & > p {
            font-weight: bold;
        }
        p {
            font-size: 14px;
            color: #2a2a2a;
            span {
                color: @primary-color;
            }
            .anticon {
                font-size: 12px;
                color: #333;
                margin-right: 4px;
            }
        }
        & > p {
            width: 116px;
        }
        .delete-box {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            width: calc(100% - 116px - 88px);
            div {
                box-sizing: border-box;
                border: 1px solid #666;
                padding: 4px 16px 4px 10px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                position: relative;
                margin-left: 10px;
                background-color: #fff;
                margin-bottom: 4px;
                &:first-child {
                    margin-left: 0;
                }
                .icon-close {
                    position: absolute;
                    right: 0;
                    top: 0;
                }
            }
        }
        button {
            margin-left: 20px;
        }
    }
    .form-content {
        .head-title {
            padding: 20px 20px 10px;
            font-size: 18px;
            font-weight: 400;
            color: #333333;
            line-height: 25px;
            position: relative;
            &:after {
                content: '';
                display: block;
                width: calc(100% + 20px);
                height: 1px;
                position: absolute;
                background-color: #f3f3f3;
                left: -10px;
                bottom: 0;
            }
        }
        .form {
            padding: 40px 35px;
            ::v-deep {
                .ant-form-item-label {
                    width: 106px;
                }
                .ant-form-item-control-wrapper {
                    width: 710px;
                }
            }
            .attr {
                .tip {
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 39px;
                    color: #666;
                }
                .attr-box {
                    background: #f3f3f3;
                    border-radius: 4px;
                    max-height: 150px;
                    overflow-y: auto;
                    padding: 10px 20px;
                }
            }
            .title {
                .input-box {
                    display: flex;
                    align-items: center;
                    ::v-deep {
                        .ant-input {
                            width: 300px;
                        }
                    }
                    .length {
                        font-size: 12px;
                        font-weight: 400;
                        color: #333333;
                        margin-left: 10px;
                    }
                }
                .tip {
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    line-height: 17px;
                    color: #666;
                }
            }
            .img-input {
                .item {
                    .size {
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 17px;
                        color: @primary-color;
                        margin-bottom: 6px;
                        padding-top: 11px;
                    }
                    .tip {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 376px;
                        p {
                            font-size: 12px;
                            font-weight: 400;
                            line-height: 17px;
                            color: #666;
                        }
                        button {
                            font-size: 12px;
                            font-weight: 400;
                            color: #69a4fd;
                            img {
                                width: 16px;
                                height: 11px;
                            }
                        }
                    }
                }
                ::v-deep {
                    .ant-upload-select {
                        width: 200px;
                        height: 150px;
                        background: #fff;
                        border: 1px solid #d4d4d4;
                        &:hover {
                            border: 1px solid @primary-color;
                            .anticon {
                                color: @primary-color;
                            }
                            .ant-upload-text {
                                color: @primary-color;
                            }
                        }
                        .anticon {
                            font-size: 42px;
                            color: #999999;
                        }
                        .ant-upload-text {
                            font-size: 14px;
                            color: #999999;
                        }
                    }
                    .ant-upload-list-picture-card-container {
                        width: 200px;
                        height: 150px;
                    }
                    .ant-upload-list-picture-card .ant-upload-list-item {
                        width: 200px;
                        height: 150px;
                        padding: 0;
                    }
                }
            }
            .price {
                .price-input {
                    width: 200px;
                }
                .unit-input {
                    width: 60px;
                }
                .tips {
                    p {
                        font-size: 12px;
                        color: #666;
                        font-weight: 400;
                        line-height: 17px;
                    }
                    .title {
                        .ant-btn-link {
                            font-size: 12px;
                            font-weight: 400;
                            color: #69a4fd;
                            padding: 0;
                            img {
                                width: 16px;
                                height: 11px;
                            }
                        }
                    }
                }
            }
            .tips-item {
                p {
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 17px;
                    color: #666;
                    &:first-child {
                        padding-top: 11px;
                    }
                }
            }
            .check-privacy {
                padding-left: 105px;
                ::v-deep {
                    .ant-form-item-control-wrapper {
                        width: 780px;
                    }
                    .ant-radio-inner {
                        border-color: @primary-color;
                        &::after {
                            background-color: @primary-color;
                        }
                    }
                    .ant-checkbox-inner {
                        // border-color: @primary-color;
                    }
                    .ant-radio-checked {
                        .ant-checkbox-inner {
                            background-color: @primary-color;
                            border-color: @primary-color;
                            &::after {
                                background-color: @primary-color;
                            }
                        }
                        &::after {
                            border: 1px solid @primary-color !important;
                        }
                    }
                    .ant-radio-wrapper:hover .ant-radio,
                    .ant-radio:hover .ant-radio-inner,
                    .ant-radio-input:focus + .ant-radio-inner {
                        border-color: @primary-color;
                    }
                    .ant-checkbox-checked {
                        .ant-checkbox-inner {
                            border-color: @primary-color;
                            background-color: @primary-color;
                        }
                        &::after {
                            border-color: @primary-color;
                        }
                        &:hover {
                            .ant-checkbox-inner {
                                border-color: @primary-color;
                            }
                        }
                    }
                    .ant-checkbox-wrapper:hover .ant-checkbox-inner,
                    .ant-checkbox:hover .ant-checkbox-inner,
                    .ant-checkbox-input:focus + .ant-checkbox-inner {
                        border-color: @primary-color;
                    }
                }
                .word {
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 17px;
                    color: #333333;
                    ::v-deep {
                        .ant-btn {
                            padding: 0;
                            font-size: 12px;
                            line-height: 17px;
                            border: 0;
                        }
                    }
                }
            }
            .btn {
                padding-left: 105px;
            }
        }
    }
}
.rich-text {
    ::v-deep {
        .ant-modal-body {
            height: 700px;
            overflow-y: auto;
            .ql-align-center {
                text-align: center;
            }
        }
    }
}
.preview-show {
    ::v-deep {
        .ant-modal-close-x {
            width: 40px;
            height: 40px;
            line-height: 40px;
        }
    }
}
.mt10 {
    margin-top: 10px;
}
.flex {
    display: flex;
}

::v-deep {
    .ant-btn-link {
        color: @primary-color;
    }
}
.mb20 {
    margin-bottom: 10px !important;
}
</style>
